<template>
  <div>
    <h2 :style="{opacity}">欢迎学习vue </h2>
    <ul>
      <li>news001 <input/></li>
      <li>news002 <input/></li>
      <li>news003 <input/></li> 
    </ul>
  </div>
</template>

<script>
export default {
  name: "News",
  data() {
    return {
      opacity:1
    }
  },
  beforeDestroy(){
    console.log("News即将销毁")
    clearInterval(this.timer)
  },
  //  mounted() {  //Vue完成模板的解析并把初始的真实DOM元素放入页面后(挂载完毕) 调用mounted
  //   this.timer = setInterval(()=>{
  //             console.log("@")
  //               this.opacity -=0.01
  //               if(this.opacity<=0){
  //                   this.opacity=1
  //               }
  //           },16)
  // },
  activated(){
    this.timer = setInterval(()=>{
              console.log("@")
                this.opacity -=0.01
                if(this.opacity<=0){
                    this.opacity=1
                }
            },16)
  },
  deactivated() {
    clearInterval(this.timer)
  },
};
</script>

<style>
</style>